﻿
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link href="~/css/site.css" rel="stylesheet" />
    <link href="~/css/Layout.css" rel="stylesheet" />
    <style>
        *{
         margin:0;
         padding:0;   
        }

        footer {
            box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            text-align: center;
            height: 80px;
            width: 100%;
            background: linear-gradient(to right, #1f3c58, #2a5573); /* 与顶部导航栏颜色一致的渐变 */
            position: fixed;
            bottom: 0;
            left: 0;
            display: none;
        }

            footer p {
                color: #ffffff; /* 白色文字，增强对比度 */
                line-height: 80px;
                font-size: 16px;
                letter-spacing: 1.2px;
                margin: 0;
            }

                footer p:hover {
                    color: #ffd700; /* 悬停时文字变为金色 */
                }

    </style>
</head>
<body>
    <div id="parent">
        <header>
            <span class="logo">
                <img src="~/images/logo3.png" alt="Logo" />
            </span>
            <div class="divnav">
                <ul class="nav">
                    <li><a href="/News/Index">首页</a></li>
                    <!-- 从 ViewBag.NewsType 动态加载菜单项 -->
                    @{
                        foreach (var item in ViewBag.NewsType)
                        {
                                            <li class="NewsTypeId"><a href="/News/NewsList" bid="@item.TypeId">@item.TypeName</a></li>
                        }
                    }
                </ul>
          
            </div>
            <div class="header-profile">
                <img src="~/images/profile-icon.png" alt="用户头像" />
                @* <a href="/profile" id="nickName">游客用户</a> <!-- 用户资料或登录链接 --> *@
                <input type="text" id="nickName" placeholder="游客用户"  disabled>
                <!-- 触发按钮 -->
                <button id="openLoginModal" class="open-modal-btn">还未登录,点击登录</button>
            </div>
        </header>

        <div id="son">
        
       
            @RenderBody()
        </div>

        <!-- 登录弹窗 -->
        <div id="loginModal" v-if="showModal" class="modal">
            <div class="modal-content">
                <!-- 关闭按钮 -->
                <span id="closeModal" class="close-btn">&times;</span>
                <!-- 登录表单 -->
                <div class="login-container">
                    <div class="login-card">
                        <!-- 左侧图像 -->
                        <div class="login-image">
                            <img src="~/images/生成个人博客图片.png" alt="Login Illustration">
                        </div>
                        <!-- 右侧表单 -->
                        <div class="login-form">
                            <h2>登录</h2>
                            <form>
                                <div class="form-group">
                                    <input type="text" id="username" placeholder="请输入用户名或邮箱号">
                                </div>
                                <div class="form-group password-group">
                                    <input type="password" id="password" placeholder="请输入密码">
                                    <span class="toggle-password" id="togglePassword">👁️</span>
                                </div>
                                <div class="form-group remember-me">
                                    <input type="checkbox" id="rememberMe">
                                    <label for="rememberMe">记住我</label>
                                  
                                </div>

                                <div class="form-group remember-me">
                                    <span for="rememberMe" id="openRegisterModal">还没有账号，现在去注册！</span>
                                </div>
                                <button type="button" id="login" class="submit-btn">登录</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>


      
        <footer>
            @*<p>&copy; 2024 小威编程 | 个人博客</p>*@
            <p>桂ICP备2023011154号-1</p>
        </footer>
   <script src="~/lib/jq.js"></script>
        @* <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入最新的 jQuery --> *@
        <!-- 引入 layui.css -->
        <link href="//unpkg.com/layui@2.9.21-rc/dist/css/layui.css" rel="stylesheet">
        <!-- 引入 layui.js -->
        <script src="//unpkg.com/layui@2.9.21-rc/dist/layui.js"></script>
        <script src="~/lib/axios.js" asp-append-version="true"></script>
        <script src="@Url.Content("~/lib/vue.js")" type="text/javascript"></script>
        @RenderSection("Scripts", required: false)
    </div>
    <script>
        // 确保 DOM 加载完毕后再执行
        $(document).ready(function () {
            // 处理点击事件并存储数据
            //$(".NewsTypeId").click(function () {
            //    // 获取当前被元素的属性的值
            //    //var id = $(this).attr("bid");
            //    //var Name = $(this).attr("typeName");
            //    var id = $(this).data("bid"); // 或者使用 $(this).attr("data-bid");
            //    var Name = $(this).text(); // 获取链接的文本内容，即 TypeName
            //    console.log(id+Name);
            //    alert("测试博客id: " + id);  // 弹出提示框
            //    localStorage.setItem("NewsTypeId", id);
            //    localStorage.setItem("NewsTypeName", Name);
            //});
            // 使用 jQuery 选择器提取 bid 和 TypeName
            $(".NewsTypeId a").click(function () {
                // 获取自定义属性 bid
                var id = $(this).attr("bid");

                // 获取链接文本作为 TypeName
                var Name = $(this).text();
                    localStorage.setItem("NewsTypeId", id);
                    localStorage.setItem("NewsTypeName", Name);
                console.log("ID: " + id);
                console.log("TypeName: " + Name);
            });

            // 处理点击 span 时跳转 调转到后台管理页面
            $(".logo").click(function () {
                location.href = "/admin/NewsLogin";
            });

           var token =localStorage.getItem('onlineUserToken');
           if(token!=null){
             var name =  localStorage.getItem('onlineUserName');
             console.log(name);
             $("#nickName").val(name);

            $("#openLoginModal").fadeOut();
           }
        
     
          
          // 打开弹窗
          $("#openLoginModal").on("click", function () {
            $("#loginModal").fadeIn(); // 使用 fadeIn 显示弹窗
          });

          // 关闭弹窗
          $("#closeModal").on("click", function () {
            $("#loginModal").fadeOut(); // 使用 fadeOut 隐藏弹窗
          });

          // 点击空白区域关闭弹窗
          $(window).on("click", function (e) {
            if ($(e.target).is("#loginModal")) {
              $("#loginModal").fadeOut();
            }
          });

          // 密码可见性切换
          $("#togglePassword").on("click", function () {
            const passwordField = $("#password");
            const type = passwordField.attr("type") === "password" ? "text" : "password";
            passwordField.attr("type", type);
          });
  

              // 登录方法
          $("#login").on("click", function () {
          var passwordvalue =  $("#password").val();
           var usernamevalue =  $("#username").val();

                $.ajax({
            url: '/api/OnLineUser/login',
            type: 'POST',
              contentType: 'application/json', // 确保发送的数据格式是 JSON
                data: JSON.stringify({
            password: passwordvalue,
            userName: usernamevalue
        }),
            success: function(response) {
                console.log('Response:', response);
                if(response.code==0){
                      // Usage
        layui.use(function(){
          var layer = layui.layer;
          // Welcome
          // layer.msg('登录成功', {icon: 6});
             layer.alert('登录成功',{icon: 6});
          localStorage.setItem('onlineUserToken', response.data.token);
          localStorage.setItem('onlineUserName', response.data.info.nickName);
             $("#nickName").val(response.data.info.nickName);
            $("#openLoginModal").fadeOut();
                   $("#loginModal").fadeOut(); // 使用 fadeOut 隐藏弹窗
                             
        });
                }
                        layer.alert('账号或密码错误', { icon: 5 });
            },
            error: function(error) {
                console.error('Error:', error);
            }
        });

          });







            // 代码雨效果
            const son = document.getElementById("son");
            const characters = [
                // JavaScript 常用代码
                '<div>', 'function', 'console.log', 'let', 'const', 'var',
                'document.querySelector', 'alert', 'class', 'return',

                // C# 常用代码
                'using System;', 'public static void Main()', 'Console.WriteLine()', 'int', 'string', 'bool', 'var',
                'if', 'else', 'foreach', 'for', 'while', 'try', 'catch', 'finally', 'void',
                'class', 'interface', 'namespace', 'new', 'null', 'this', 'return', 'break', 'continue', 'async', 'await',
                'public', 'private', 'protected', 'internal', 'readonly', 'const', 'static', 'dynamic'
            ];

            // 随机生成多个代码字符雨
            for (let i = 0; i < 30; i++) {
                let rain = document.createElement('div');
                rain.classList.add('rain');
                rain.innerHTML = characters[Math.floor(Math.random() * characters.length)];

                // 随机设置字符的位置和动画时长
                rain.style.left = Math.random() * 100 + "%";  // 随机生成位置
                rain.style.animationDuration = Math.random() * 5 + 3 + "s";  // 动画时长
                son.appendChild(rain);
            }
        });
    </script>
@*    <script>
        window.onload = function () {
            $(".NewsTypeId").click(function () {
                //获取当前被元素的属性的值
                var id = $(this).attr("bid");
                var Name = $(this).attr("typeName");
               alert("测试博客id",id);
                localStorage.setItem("NewsTypeId", id);
                localStorage.setItem("NewsTypeName", Name);
            });

            $("span").click(function () {
                location.href = "/admin/NewsLogin";
            });
        };
        
        //代码雨
        window.onload = function () {



            const son = document.getElementById("son");
            //const characters = ['<div>', 'function', 'console.log', 'let', 'const', 'var', 'document.querySelector', 'alert', 'class', 'return'];

            const characters = [
                // JavaScript 常用代码
                '<div>', 'function', 'console.log', 'let', 'const', 'var',
                'document.querySelector', 'alert', 'class', 'return',

                // C# 常用代码
                'using System;', 'public static void Main()', 'Console.WriteLine()', 'int', 'string', 'bool', 'var',
                'if', 'else', 'foreach', 'for', 'while', 'try', 'catch', 'finally', 'void',
                'class', 'interface', 'namespace', 'new', 'null', 'this', 'return', 'break', 'continue', 'async', 'await',
                'public', 'private', 'protected', 'internal', 'readonly', 'const', 'static', 'dynamic'
            ];
            // 随机生成多个代码字符雨
            for (let i = 0; i < 30; i++) {
                let rain = document.createElement('div');
                rain.classList.add('rain');
                rain.innerHTML = characters[Math.floor(Math.random() * characters.length)];

                // 随机设置字符的位置和动画时长
                rain.style.left = Math.random() * 100 + "%";  // 随机生成位置
                rain.style.animationDuration = Math.random() * 5 + 3 + "s";  // 动画时长
                son.appendChild(rain);
            }


             
        };

    </script>*@
</body>
</html>
